<template>
  <section id="watches">
    <h4 class="col-12">Computime GPS watch Tracking Platform</h4>
    <section class="search-box">
      <input type="text" class="form-control" v-model="search" placeholder="Watch / IMEI / Phone Number">
      <button class="btn btn-secondary" @click="toSearch">
        <i class="icon-magnifier"></i>
        <span>Search</span>
      </button>
    </section>
    <section class="switches ml-auto">
      <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#watches-tab1">watches-tab1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#watches-tab2">watches-tab2</a>
        </li>
      </ul>
    </section>
    <section class="map-component">
      <div class="tab-pane fade show active" id="watches-tab1">watches-tab1</div>
      <div class="tab-pane fade" id="watches-tab2">watches-tab2</div>
    </section>
  </section>
</template>

<script>

export default {
  name: 'watches',
  data: () => {
    return {
      search: ''
    }
  },
  methods: {
    toSearch() {
      console.log(this.search)
    }
  }
}
</script>

<style lang="scss" scoped>
#watches {
  display: flex;
  flex-wrap: wrap;
  padding: 26px 0;
  h4 {
    font-weight: 700;
    line-height: 30px;
  }
  .search-box {
    display: flex;
    width: 435px;
    margin-top: 20px;
    margin-left: 10px;
    height: 32px;
    .form-control {
      width: 295px;
      border-radius: 2px;
      font-size: 13px;
    }
    .btn.btn-secondary {
      text-align: center;
      border-radius: 2px;
      margin-left: 5px;
      line-height: 0;
      span {
        position: relative;
        top: -1px;
      }
    }
  }
  .switches {
    margin-top: 23px;
    margin-right: 3vw;
    .nav-tabs {
      border: 0;
    }
    .nav-link {
      font-size: 14px;
      border-width: 0 !important;
      &.active {
        color: #fff;
        background: #000;
        font-weight: 700;
      }
      &:hover {
        border-width: 0 !important;
      }
    }
  }
  .map-component {
    width: 100%;
    height: 650px;
    margin-top: 3px;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
      font-weight: 700;
      position: absolute;
      width: 100%;
      height: 650px;
      background: #000;
      color: #fff;
    }
  }
}
</style>